<template>
  <div>
    <div class="redDivActive">
     已用时：{{ timeNum }}
    </div>
  </div>

</template>

<script>
export default {
  props: {
    starTime: {
      type: Date,
      required: true
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      intervalId: null,
      startNum:null,
      timeNum: ''
    };
  },
  computed: {

  },
  methods: {
    remainingTime() {
      const start = this.startNum
      const now = new Date();
      const distance = now - start;
      if (distance < 0) {
        return '00:00:00';
      }
      const days = this.pad(Math.floor((distance / (1000 * 60 * 60 * 24))));
      const hours = this.pad(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
      const minutes = this.pad(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
      const seconds = this.pad(Math.floor((distance % (1000 * 60)) / 1000));
       if(days>0){
        return `${days} ${hours}:${minutes}:${seconds}`;
       }else if(hours>0){
        return `${hours}:${minutes}:${seconds}`;
       }else if(minutes>0){
        return `${minutes}:${seconds}`;
       }else{
        return `${minutes}:${seconds}`;
       }
     
    },
    getEndTime(){
      let data=this.timeNum
      console.log(data)
        this.stopCountdown();
         this.$emit('setEndtime',data)
    },
    pad(num) {
      if(num){
        return ('00' + num).slice(-2);
      }else{
        return ('00' + num).slice(-2);
      }
      
    },
    startCountdown() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        this.timeNum = this.remainingTime()
      }, 1000);
    },
    stopCountdown() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    }
  },
  created() {
    this.startNum=this.starTime
    this.startCountdown();
  },
  mounted() {
  
  },
  beforeDestroy() {
    this.stopCountdown();
  }
};
</script>
<style lang="scss" scoped>


.redDivActive {
  display: block;
}
</style>